import React from 'react';
import _ from 'underscore';

import View from 'lib/View.jsx';
import dispatcher from 'lib/dispatcher';
import GridWidget from 'lib/components/GridWidget.jsx';

import MainScope from './MainScope.es6';
import EventEditor from './EventEditor.jsx';

export default class MainView extends View {
  handleKeywordChange(e) {
    if (e.which === 13) {
      dispatcher.dispatch({
        $type: 'search_keyword',
        value: e.target.value.toLowerCase().trim()
      });
    }
  } // handleKeywordChange

  handleMountModal() {
    EventEditor.mount({
      onClose: success => {
        if (success === true) {
          this.scope.fetch();
        }
      }
    });
  }

  render() {
    return (
      <div className="pure-g">
        <div className="pure-u-1">
          <div className="float-left">
            <a href="javascript:;" className="btn-green" onClick={ this.handleMountModal.bind(this) }>
              + 创建虚拟事件
            </a>
            <span style={{ marginLeft: 10 }}>
              共 { this.state.grid.data ? this.state.grid.data.length : '--' } 个虚拟事件
              </span>
          </div>
          <div className="float-right">
            <input
              type="text"
              className="input-text"
              placeholder="Search..."
              onKeyPress={ this.handleKeywordChange.bind(this) } />
          </div>
        </div>
        <div className="pure-u-1">
          <GridWidget cols={ this.state.gridCols } store={ this.state.grid } />
        </div>
      </div>
    );
  }
}

MainView.defaultProps = {
  Scope: MainScope
}
